import React from 'react';
import { Button, Form, Input, InputNumber, Select, DatePicker } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';


const FormItem = Form.Item;

const { Option } = Select;


const formPath = '/AccountMove/AccountMoveForm';


@connect(({
  accountMoveForm,accountAccount, resPartner, productProduct, accountAnalyticAccount,
}) => ({
  accountMoveForm,accountAccount, resPartner, productProduct, accountAnalyticAccount,
}))
@Form.create()
class CustomizedForm extends React.Component {
  state = {
    record: {},
  }

  id = 0


  async componentDidMount() {
    const { location: {query: { id } } } = this.props;
    if (id) {
      this.id = Number(id);
      const { accountMoveForm: {displayRecord: record} } = this.props;


      const {line_ids=[]} = record ;

      const recs = line_ids.filter(item=>item.id===this.id)

      if (recs.length){
        this.setState( { record: recs[0] })
      }

      //
    }

    const { dispatch } = this.props;

    await dispatch({
      type: 'accountAccount/search',
      payload: {domain:[] },
    });


    await dispatch({
      type: 'resPartner/search',
      payload: {domain:[] },
    });

    await dispatch({
      type: 'productProduct/search',
      payload: {domain:[] },
    });

    await dispatch({
      type: 'accountAnalyticAccount/search',
      payload: {domain:[] },
    });


  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll( async (err, values) => {
      if (!err) {
        //console.log( values );
        const { date_maturity } = values;

        const vals = { ...values,
          date_maturity: date_maturity.format('YYYY-MM-DD'),
        };

        const { accountMoveForm: {id: pid} } = this.props;

        await dispatch({
          type: 'accountMoveForm/formUpdateLine',
          payload: { id: this.id, vals }
        });

        router.push(`${formPath}?id=${pid}&fix`);
      }
    })
  }

  render() {
    const { form: { getFieldDecorator }  } = this.props;
    const { record } = this.state;
    const { accountAccount: { recordsList: accountList } } = this.props;
    const { resPartner: { recordsList: partnerList } } = this.props;
    const { productProduct: { recordsList: productList } } = this.props;
    const { accountAnalyticAccount: { recordsList: analyticList } } = this.props;


    return (
          <Form onSubmit={ this.handleSubmit}>

            <FormItem style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" >提交
              </Button>
            </FormItem>
            <Form.Item label="摘要" >
                {getFieldDecorator('name', {
                  initialValue: record.name,
                })(<Input />)}
            </Form.Item>


            <FormItem label="科目">
              {getFieldDecorator('account_id', {
                rules: [{ required: true }],
                initialValue: record.account_id ? record.account_id.id : 0
              })(
                <Select placeholder="科目">
                  <Option value={0} >未选择</Option>
                  {accountList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <Form.Item label="借方" >
                {getFieldDecorator('debit', {
                  rules: [{ required: true, message: 'name is required!' }],
                  initialValue: record.debit || 0,
                })(<InputNumber />)}
            </Form.Item>

            <Form.Item label="贷方" >
                {getFieldDecorator('credit', {
                  rules: [{ required: true, message: 'name is required!' }],
                  initialValue: record.credit || 0,
                })(<InputNumber />)}
            </Form.Item>

            <FormItem label="业务伙伴">
              {getFieldDecorator('partner_id', {
                rules: [{ required: true }],
                initialValue: record.partner_id ? record.partner_id.id : 0
              })(
                <Select placeholder="业务伙伴">
                  <Option value={0} >未选择</Option>
                  {partnerList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <FormItem label="产品或服务">
              {getFieldDecorator('product_id', {
                rules: [{ required: true }],
                initialValue: record.product_id ? record.product_id.id : 0
              })(
                <Select placeholder="产品或服务">
                  <Option value={0} >未选择</Option>
                  {productList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="分析科目">
              {getFieldDecorator('analytic_account_id', {
                rules: [{ required: true }],
                initialValue: record.analytic_account_id ? record.analytic_account_id.id : 0
              })(
                <Select placeholder="分析科目">
                  <Option value={0} >未选择</Option>
                  {analyticList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <FormItem label="到期">
              {getFieldDecorator('date_maturity', {
                initialValue: record.date_maturity ? moment(record.date_maturity, 'YYYY-MM-DD') : moment()
              })(<DatePicker />)}
            </FormItem>

          </Form>

    );
  }


}


export default CustomizedForm;

